import React, { useState } from 'react'
import style from './login.module.css'
import { Input, Button } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';

export default function Login(props) {
    const [username, setUsername] = useState("")
    const [pwd, setPwd] = useState("")

    const login = () => {
        console.log(username, pwd, props)
        props.history.push('/')
    }
    return (
        <div>
            <div className={style.loginContainer}>
                <div className={style.loginWrapper}>
                    <div className={style.loginTitle}>小安科技智能车开发管理平台</div>
                    <div className={style.loginDesc}>Sword是BladeX前端UI项目，基于react 、ant design、umi、dva等流行技术栈。</div>
                    <div className={style.content}>
                        <div className={style.inputItem}>
                            <Input placeholder="请输入用户名" prefix={<UserOutlined />} onChange={(e) => setUsername(e.target.value)} />
                        </div>
                        <div className={style.inputItem}>
                            <Input type="password" placeholder="请输入密码" prefix={<LockOutlined />} onChange={(e) => setPwd(e.target.value)} />
                        </div>
                        <div className={style.loginBtn}>
                            <Button type="primary" style={{ 'width': '100%' }} onClick={login}>登录</Button>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )
}
